<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色</title>
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
<div id="app">


    <!--搜索框-->
    <el-form :inline="true" :model="roleVo" class="demo-form-inline">
        <!--员工姓名框-->
        <el-form-item label="姓名">
            <el-input v-model="roleVo.rolename" placeholder="员工姓名"></el-input>
        </el-form-item>
        <!--时间选择框-->
        <el-form-item label="时间">
            <el-date-picker
                    v-model="roleVo.createTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="success" @click="add">添加</el-button>
        </el-form-item>
    </el-form>


    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="rolename"
                label="名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="roleDescribe"
                label="描述">
        </el-table-column>

        <el-table-column
                prop="createTime"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="updataTime"
                label="修改时间">
        </el-table-column>

        <el-table-column label="操作" width="350">
            <template slot-scope="scope">
                <el-button @click="del(scope.row)" type="danger">删除</el-button>
                <el-button @click="editEmp(scope.row)" type="primary">修改描述</el-button>
                <el-button type="primary" @click="showRoleDialog(scope.row.id)">分配权限</el-button>
            </template>
        </el-table-column>
    </el-table>
<!--    为用户分配角色-->
    <el-dialog
            title="分配权限"
            :visible.sync="dialogVisible01"
            width="30%">
        <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                ref="rootTree"
                :props="defaultProps">
        </el-tree>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible01 = false">取 消</el-button>
            <el-button type="primary" @click="qr">确 定</el-button>
          </span>
    </el-dialog>

<!--    修改-->

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form  label-width="80px" :model="editForm">
            <el-form-item label="描述">
                <el-input v-model="editForm.roleDescribe"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
                </span>
    </el-dialog>

<!--    添加-->
    <el-dialog
            title="提示"
            :visible.sync="di"
            width="30%">

        <el-form  label-width="80px" :model="addForm">
            <el-form-item label="姓名">
                <el-input v-model="addForm.rolename"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="addForm.roleDescribe"></el-input>
            </el-form-item>
            <el-form-item label="入职日期">
                <el-date-picker
                        v-model="addForm.createTime"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        style="width: 100%"
                >
                </el-date-picker>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
                    <el-button @click="di = false">取 消</el-button>
                    <el-button type="primary" @click="addrole">确认添加</el-button>
                  </span>
    </el-dialog>
<!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            editForm:{},
            addForm:{},
            dapts:[],
            tableData:[],
            currentPage:1,
            pageSize:5,
            total:0,
            roleVo:{},
            dialogVisible01:false,
            dialogVisible:false,
            di:false,
            //属性数据
            data:[],
            checkIds:[],
            defaultProps: {
                children:'children',
                label:'menuName'
            },
            id:0,

        },
        created(){
            this.initTable();
        },
        methods:{

            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            // 确认分配角色
            qr(){
                let checkIds=this.$refs.rootTree.getCheckedKeys();
                let halfIds=this.$refs.rootTree.getHalfCheckedKeys();
                let ids=checkIds.concat(halfIds);
                axios.post("/permission/qr?id="+this.id+"&integers="+ids).then(resp=>{
                    this.$message.success("分配成功");
                    this.dialogVisible01=false;
                })
            },

            showRoleDialog(id){
                this.id=id;
                this.dialogVisible01=true;
                axios.get("/permission/role?id="+id).then(resp=>{
                    this.data=resp.data.data.firsts;
                    this.checkIds=resp.data.data.integers;
                    setTimeout(() =>{
                        resp.data.data.integers.forEach(value=>{
                            this.$refs.rootTree.setChecked(value, true, false);
                        })}, 100)
                })
            },

            //添加
            add(){
                this.di=true;
                this.editForm={};
                axios.get("/role/roleDescribe").then(resp=>{
                    this.dapts=resp.data.data;
                })
            },

            addrole(){
                axios.post("/role/insert",this.addForm).then(result=>{
                    if(result.data.code===200){
                        this.$message.success("增加成功")
                        this.di = false;
                        this.initTable();
                    }
                })
            },

            //查看当前角色所拥有的描述
            editEmp(row){
                this.dialogVisible=true;
                this.editForm=row;
                axios.get("/role/roleDescribe").then(resp=>{
                    this.dapts=resp.data.data;
                })
            },
            //修改描述
            confirmUpdate(){
                axios.post("/role/updateRoleDescribe",this.editForm).then(resp=>{
                    if(resp.data.code===200){
                        this.$message.success("修改成功");
                        dialogVisible=false;
                        this.initTable();
                    }
                })
            },

            //删除角色
            del(row) {
                axios.post("/role/delectRole",row).then(resp=>{
                    if (resp.data.code===200){
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            },
            onSubmit(){
                this.initTable();
            },
            initTable(){
                axios.post("/role/findByCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.roleVo).then(resp=>{
                    console.log(resp)
                    if (resp.data.code===200){
                        this.tableData=resp.data.data.list;
                        this.total=resp.data.data.total;
                    }
                })
            }
        }
    })
</script>
<style>
    html,body,#app{
        margin: 0px;
        padding: 0px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 500px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    body > .el-container {
        margin-bottom: 40px;
    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
</html>